<template>
  <div class="parent">
    <el-row class="row" :gutter="20">
      您现在的收入是
      <el-input-number v-model="nowIncome" type="number" :min="100000" :max="1000000" />
      想要在
      <el-input-number v-model="deadlineYear" type="number" :min="2020" :max="2100" />
      实现
      <el-input-number v-model="targetIncome" type="number" :min="10" :max="10000" />
      万元       年薪
      <el-button type="primary" @click="go">Go</el-button>
    </el-row>

    <el-row v-show="step>0" class="row" :gutter="20">
      每年应有涨幅：{{ (step*100)-100 }}%
    </el-row>

    <el-row :gutter="20">
      <el-col :span="12">
        <el-table
          class="row"
          :data="list"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="right" label="年份" width="200px">
            <template slot-scope="scope">
              {{ scope.row.year }}
            </template>
          </el-table-column>

          <el-table-column align="left" label="应有收入(单位：万元)">
            <template slot-scope="scope">
              {{ (scope.row.income/10000).toFixed(2) }}
            </template>
          </el-table-column>

        </el-table>
      </el-col>
      <el-col :span="12">
        <div id="chart" style="width: 100%;height: 500px;" />
      </el-col>
    </el-row>
  </div>
</template>

<script>

import { getAnnualReport } from '@/api/finance/millionaire'

export default {
  data() {
    return {
      nowIncome: 1,
      deadlineYear: 2020,
      targetIncome: 10,
      annualReport: [],
      list: [],
      step: 0
    }
  },
  methods: {
    go() {
      this.getAnnualReport()
    },
    async getAnnualReport() {
      const param = { nowIncome: this.nowIncome, deadlineYear: this.deadlineYear, targetIncome: (this.targetIncome * 10000) }
      const { data } = await getAnnualReport(param)

      const chart = this.$Echarts.init(document.getElementById('chart'))
      if (data) {
        this.list = data.annualReport
        this.step = data.step
        console.log(data)
        const yearArr = []
        const incomeArr = []
        for (const item of data.annualReport) {
          yearArr.push(item.year)
          incomeArr.push(item.income)
        }
        const option = {
          xAxis: {
            type: 'category',
            data: yearArr
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: incomeArr,
            type: 'line',
            itemStyle : { normal: {label : {show: true}}}
          }]
        }
        chart.setOption(option)
      }
    }
  }

}

</script>
<style>
  .parent{
    margin:30px;
  }
  .row{
    margin: 10px;
  }

</style>
